<script setup lang="ts">
import { useNetworkRiskGradingStore } from '@/store/modules/earlyWarning/networkRiskGrading';

const { pipeDialog, tableData, total, queryParams, loading } = storeToRefs(useNetworkRiskGradingStore());
const { getList } = useNetworkRiskGradingStore();

const ToFixed = (value: number | string) => {
  return typeof value === 'number' ? value.toFixed(2) : Number(value).toFixed(2);
};
</script>

<template>
  <el-dialog v-model="pipeDialog" :modal="false" :draggable="true" width="50%" append-to-body class="largeScreen-dialog">
    <div class="pipe-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-background="rgba(0,0,0,0.2)"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column prop="pipelineCimId" label="序号" min-width="90" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="pipelineName" label="管线类型" min-width="90" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="score" label="加权总分" min-width="90" show-overflow-tooltip align="center">
          <template v-slot="scope">
            <div>
              {{ ToFixed(scope.row.score) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="风险类型" min-width="90" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="rqzs" label="燃气管道自身因素(加权分)" min-width="100" show-overflow-tooltip align="center">
          <template v-slot="scope">
            <div>
              {{ ToFixed(scope.row.rqzs) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dsfshys" label="第三方损害(加权分)" min-width="100" show-overflow-tooltip align="center">
          <template v-slot="scope">
            <div>
              {{ ToFixed(scope.row.dsfshys) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="qtys" label="其他(加权分)" min-width="110" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="kzcs" label="控制措施" min-width="110" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="zrgs" label="责任单位" min-width="80" show-overflow-tooltip align="center"></el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.pipe-table {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    /* 全局样式中 */
    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    /* Scrollbar styles */
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }

  .pagination-container {
    background: #083577;
    padding: 10px 16px;
    text-align: right;
    margin: 0;
  }

  .pagination-container.hidden {
    display: none;
  }

  :deep(.el-pagination__total) {
    color: #fff;
  }

  :deep(.el-pagination__jump) {
    color: #fff;
  }
}
</style>
